@charset "utf-8";
@import "loader";
@import "config";
@import "rem-calc";

.alipay-show{
  display: none;
}

body[data-view="alipay"]{
  .alipay-hide{
    display: none;
  }
  .alipay-show{
    display: block;
  }
}

.ui-toast{
  color: red;
}

.viewport{
  width: 100%;
  min-height: 100%;
  overflow: auto;
}

// ===== BEGIN: added by ourself ==== //
*,:after,:before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

html {
    font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    text-size-adjust: 100%; /* 2 */
    box-sizing: border-box;
    height: 100%;
    user-select:none;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    height: 100%;
    margin: 0 auto;
    font-size: $rem-base;
    background-color: #fff;
}

ul,p,h1,h2,h3,h4,h5,h6,dd {margin: 0}
ul{list-style:none;padding:0}
i,dfn,em{font-style: normal}
b{font-weight: normal}
input{outline: none;}

.qrcodebox{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 29;
  background-color: #fff;
  .table{
    position: absolute;
    width: rem-calc(327px);
    height: rem-calc(583px);
    top: 50%;
    left: 50%;
    background-image: url('#{$imgsrc}13/13_bg.jpg');
    background-size: contain;
    transform: translate(-50%,-50%);
    .qrcode{
      width: rem-calc(195px);
      height: rem-calc(195px+64px);
      left: rem-calc(54px);
      bottom: rem-calc(30px);
      position: absolute;
      padding: rem-calc(64px) 0 0;
    }
  }
}

.ticketList{
  .t{
    width: rem-calc(286px);
    height: rem-calc(74px);
    text-indent: -9999px;
    overflow: hidden;
    margin: rem-calc(18px) auto 0;
    background: url('#{$imgsrc}10/10_1.png') no-repeat;
    background-size: contain;
  }
  .take{
    width: rem-calc(110px);
    height: rem-calc(43px);
    margin-top: rem-calc(10px);
    background-image: url('#{$imgsrc}10/10_2.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    user-select: text;
    &.taked{
      background-image: url('#{$imgsrc}10/10_4.png');
    }
  }
  .list{
    width: rem-calc(340px);
    margin: 0 auto;
    padding: rem-calc(18px) 0 rem-calc(24px) 0;
    box-sizing: border-box;
    &.single{
      padding: rem-calc(12px) 0 0;
      margin: 0 auto;
      .item{
        padding: 0;
        margin: 0 auto;
        width: rem-calc(230px);
        &1,&7{
          width: rem-calc(190px);
        }
      }
    }
    .item{
      user-select: text;
      width: 100%;
      height: rem-calc(64px);
      padding-left: rem-calc(230px);
      box-sizing: border-box;
      vertical-align: middle;
      background-image: url('#{$imgsrc}10/10_3.png');
      background-repeat: no-repeat;
      background-size: rem-calc(224px) auto;
      @for $i from 0 through 7{
        &#{$i+1}{
          @if $i == 0 {
            height: rem-calc(56px);
            .take{
              margin-top: 0;
            }
          }
          background-position: 0 rem-calc(-$i*60px);
          @if $i == 1 {
            background-position: 0 rem-calc(-6*60px);
          }
          @if $i == 2 {
            height: rem-calc(56px);
            background-position: 0 rem-calc(-$i*56px);
          }
          @if $i == 3 {
            background-position: 0 rem-calc(-$i*56px);
          }
          @if $i == 6 {
            background-position: 0 rem-calc(-60px);
          }
        }
      }
    }
  }
}

.ticketCode{
  width: rem-calc(305px);
  height: rem-calc(504px);
  overflow: hidden;
  margin: 0 auto;
  background: url('#{$imgsrc}11/11_1.jpg') no-repeat;
  background-size: contain;
  position: relative;
  .sn{
    width: rem-calc(276px);
    height: rem-calc(82px);
    line-height: rem-calc(82px);
    left: rem-calc(20px);
    top: rem-calc(73px);
    font-size: rem-calc(28px);
    position: absolute;
    text-align: center;
    user-select: text;
  }
  .back{
    width: rem-calc(150px);
    height: rem-calc(100px);
    position: absolute;
    left: 0;
    bottom: .9rem;
  }
  .check{
    width: rem-calc(143px);
    height: rem-calc(98px);
    position: absolute;
    right: 0;
    bottom: .7rem;
  }
}

.takedList{
  width: rem-calc(301px);
  margin: rem-calc(15px) auto 0;
  font-size: rem-calc(18px);
  .t1,.t2,.policy li{
    background-image: url('#{$imgsrc}12/12_1.jpg');
    background-repeat: no-repeat;
    background-size: rem-calc(301px) auto;
  }
  .t1{
    width: 100%;
    height: rem-calc(131px);
    background-position: 0 0;
  }
  .t2{
    width: 100%;
    height: rem-calc(70px);
    background-position: 0 rem-calc(-292px);
  }
  .code{
    width: 100%;
    overflow: hidden;
    li{
      width: 100%;
      margin: .5rem 0;
      line-height: 2;
      // float: left;
      text-align: center;
      user-select: text;
    }
  }
  .policy{
    li{
      user-select: text;
      height: rem-calc(44px);
      padding-bottom: rem-calc(18px);
      box-sizing: border-box;
      vertical-align: bottom;
      text-align: center;
      background-position: 0 bottom;
    }
  }
}

.how2use,.how2use-red,.how2use-close{
  width: rem-calc(270px);
  height: rem-calc(69px);
  margin: 0 auto;
  background-image: url('#{$imgsrc}how2use.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: rem-calc(270px) auto;
}
.how2use-red{
  margin-top: rem-calc(12px);
  background-position: 0 rem-calc(-70px);
}
.how2use-close{
  width: rem-calc(48px);
  height: rem-calc(48px);
  margin-top: rem-calc(12px);
  background-position: 0 rem-calc(-140px);
}
.how2use-pop{
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 299;
  background: rgba(0,0,0,.9);
  .rule{
    height: 100%;
    margin: rem-calc(-100px) 0 rem-calc(-80px);
    padding: rem-calc(120px) rem-calc(50px) rem-calc(80px);
    box-sizing: border-box;
    .con{
      height: 100%;
      color: #fff;
      font-size: rem-calc(14px);
      overflow-y: auto;
      -webkit-overflow-scrolling : touch;
      p{
        margin-top: rem-calc(12px);
        counter-reset:olist;
        span.ol{
          counter-increment:olist;
          &:before{
            content:counter(olist) "、";
          }
        }
      }
    }
  }
}

.checkbtn{
  width: rem-calc(270px);
  height: rem-calc(70px);
  margin: 1rem auto;
  background-image: url('#{$imgsrc}cbtn.png');
  background-repeat: no-repeat;
  background-size: rem-calc(270px) auto;
  display: block;
}
